<template>
  <div class="b-s w-10 f-48">
    <div class="w-10 flex jc-sb base-title">
      <div class="flex">
        <div>参保人：</div>
        <div class="c-c-1">{{accountInfo.username}}</div>
      </div>
      <div class="flex">
        <div>参保地区：</div>
        <div class="c-c-1">{{accountInfo.businessCity+accountInfo.businessTown}}</div>
      </div>
    </div>
    <!--======================参保信息=============================-->
    <div class="block-ct">
      <div class="flex-c jc-sb title item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>参保信息</div>
          <div class="f-39 img-ct">
            <!-- <img src="/static/images/edit.png" class="edit-icon">编辑 -->
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>身份证</div>
          <div class="f-39 img-ct">
            {{accountInfo.idcardNumber}}
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>户口类型</div>
          <div class="f-39 img-ct">
            <!-- <input type="text" @click="showRadios(aColType[0])"  v-model="accountInfo.residenceType" maxlength="11" class="cm-input" placeholder="户口类型" /> -->
            <div>
              {{(accountInfo.residenceType||0)|residenceTypeFilter}}
              <!-- <img
                src="/static/images/arr-down.png"
                class="arr-down"
              > -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--=======================缴纳社保============================-->
    <div class="block-ct">
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>缴纳社保</div>
          <!-- <div class="f-39 c-green img-ct">
            缴纳
          </div>-->
          <div class="f-39 c-green img-ct swich-btn">
            <switchBtn @changeTab="changeTab" :iType="aType.social"/>
          </div>
        </div>
      </div>
      <div v-if="isPaySocial">
        <div class="line"></div>
        <div class="flex-c jc-sb item-ct">
          <div class="flex-c jc-sb name-ct">
            <div>社保基数</div>
            <div class="f-39 img-ct">
              <input
                type="text"
                v-model="oOrderDetail.sbBaseMoney"
                maxlength="11"
                class="cm-input"
                placeholder="请填写社保基数"
              >
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="s-item">
          <div class="flex-c jc-sb">
            <div>缴纳月份</div>
            <div class="f-39 img-ct flex">
              <div class="i-date" @click="showRadios(aColType[1],0)">
                {{oOrderDetail.sbBeginMonth||currentMonth}}
                <img
                  src="/static/images/arr-down.png"
                  class="arr-down"
                >
              </div>
              <div class="i-date" @click="showRadios(aColType[1],1)">
                {{oOrderDetail.sbEndMonth||currentMonth}}
                <img
                  src="/static/images/arr-down.png"
                  class="arr-down"
                >
              </div>
            </div>
          </div>
          <div class="flex-c jc-sb c-a5 f-39 last-item tip-txt">当前可办理{{cMonth+1}}月社保，最早可从2019年{{cMonth-2}}月开始补缴</div>
        </div>
      </div>
    </div>
    <!--=======================缴纳公积金============================-->
    <div class="block-ct">
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>缴纳公积金</div>
          <div class="f-39 c-green img-ct swich-btn">
            <switchBtn @changeTab="changeTab" :iType="aType.fund"/>
          </div>
        </div>
      </div>
      <div v-if="isPayFund">
        <div class="line"></div>
        <div class="flex-c jc-sb item-ct">
          <div class="flex-c jc-sb name-ct">
            <div>公积金基数</div>
            <div class="f-39 img-ct">
              <input
                type="text"
                v-model="oOrderDetail.gjjBaseMoney"
                maxlength="11"
                class="cm-input"
                placeholder="请填写公积金基数"
              >
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="s-item">
          <div class="flex-c jc-sb">
            <div>缴纳月份</div>
            <div class="f-39 img-ct flex">
              <div class="i-date" @click="showRadios(aColType[2],0)">
                {{oOrderDetail.gjjBeginMonth||currentMonth}}
                <img
                  src="/static/images/arr-down.png"
                  class="arr-down"
                >
              </div>
              <div class="i-date" @click="showRadios(aColType[2],1)">
                {{oOrderDetail.gjjEndMonth||currentMonth}}
                <img
                  src="/static/images/arr-down.png"
                  class="arr-down"
                >
              </div>
            </div>
          </div>
          <div class="flex-c jc-sb c-a5 last-item f-39 tip-txt">当前可办理{{cMonth+1}}月公积金，最早可从2019年{{cMonth-2}}月开始补缴</div>
        </div>
      </div>
    </div>
    <!--=======================代发工资============================-->
    <div class="block-ct">
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>代发工资</div>
          <div class="f-39 c-green img-ct swich-btn">
            <switchBtn
              @changeTab="changeTab"
              :aName="aWages"
              :iType="aType.wages"
              :selected="payType[2]"
            />
          </div>
        </div>
      </div>
      <div v-if="isPayWages">
        <div class="line"></div>
        <div class="s-item">
          <div class="flex-c jc-sb">
            <div>发薪日期</div>
            <div class="f-39 img-ct flex">
              <div class="i-date" @click="showRadios(aColType[3])">
                每月{{wagesDay}}日
                <img src="/static/images/arr-down.png" class="arr-down">
              </div>
            </div>
          </div>
          <div class="flex-c jc-sb c-a5 last-item tip-txt">{{cMonth+1}}月{{wagesDay}}日发放{{cMonth}}月工资，{{cMonth+1}}月个税会在{{cMonth+2}}月中旬申报</div>
        </div>
        <div class="line"></div>
        <div class="flex-c jc-sb item-ct">
          <div class="flex-c jc-sb name-ct">
            <div>工资金额</div>
            <div class="f-39 img-ct">
              <input
                type="text"
                v-model="oOrderDetail.gzBaseMoney"
                maxlength="11"
                class="cm-input"
                placeholder="工资金额"
              >（元）
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="s-item">
          <div class="flex-c jc-sb">
            <div>薪资月份/个税月份</div>
            <div class="f-39 img-ct">2019-01/2019-02</div>
          </div>
          <div class="flex-c jc-sb c-a5 last-item">工资订单已生成，请前往代付订单查看</div>
        </div>
      </div>
    </div>
    <!--===================================================-->
    <div class="block-ct">
      <div class="s-item">
        <div class="flex-c jc-sb">
          <div>代缴明细</div>
          <div class="f-39 img-ct">每月金额x缴纳月数</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="s-item">
        <div class="flex-c jc-sb">
          <div>社保金额</div>
          <div class="f-39 img-ct">￥{{oOrderDetail.sbBaseMoney||0}}*{{sbMonthCount}}</div>
        </div>
      </div>
      <div class="spec-ct">
        <div class="s-item">
          <div class="flex-c jc-sb">
            <div>养老</div>
            <div class="f-39 img-ct">918.00</div>
          </div>
        </div>
        <div class="s-item">
          <div class="flex-c jc-sb">
            <div>医疗</div>
            <div class="f-39 img-ct">918.00</div>
          </div>
        </div>
        <div class="s-item">
          <div class="flex-c jc-sb">
            <div>失业</div>
            <div class="f-39 img-ct">918.00</div>
          </div>
        </div>
        <div class="s-item">
          <div class="flex-c jc-sb">
            <div>工伤</div>
            <div class="f-39 img-ct">918.00</div>
          </div>
        </div>
        <div class="s-item">
          <div class="flex-c jc-sb">
            <div>生育</div>
            <div class="f-39 img-ct">918.00</div>
          </div>
        </div>
        <div class="s-item">
          <div class="flex-c jc-sb">
            <div>大额医疗</div>
            <div class="f-39 img-ct">918.00</div>
          </div>
        </div>
      </div>
      <div class="s-item">
        <div class="flex-c jc-sb">
          <div>公积金金额</div>
          <div class="f-39 img-ct">￥{{oOrderDetail.gjjBaseMoney||0}}*{{gjjMonthCount}}</div>
        </div>
      </div>
      <div class="s-item">
        <div class="flex-c jc-sb">
          <div>工资金额</div>
          <div class="f-39 img-ct">￥{{oOrderDetail.gzBaseMoney||0}}</div>
        </div>
      </div>
      <div class="s-item">
        <div class="flex-c jc-sb">
          <div>残障金</div>
          <div class="f-39 img-ct">￥454</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="s-item">
        <div class="flex-c jc-sb">
          <div>总计（不包括服务费）</div>
          <div class="f-39 img-ct">￥{{tatalMoney}}</div>
        </div>
      </div>
    </div>

    <!--===================================================-->
    <div class="w-10 btn-ct">
      <div class="cm-btn login-btn" @click="submitSbOrder">计算订单金额</div>
    </div>
    <radioList
      v-if="oRadio.isShowRadio"
      @chooseResult="chooseResult"
      :collection="oRadio.radioCol"
      :iType="oRadio.radioType"
      :selected="oRadio.selected"
    ></radioList>
  </div>
</template>

<script>
import switchBtn from '@/components/common/switch-btn'
import radioList from '@/components/common/radio-list.vue'
import { mixinParams } from '@/vmixin/vmixin'
import moment from 'moment'
import { getAccountInfo, submitSbOrder, getOrderList } from '@/service'
export default {
  data () {
    return {
      accountInfo: {}, // 账户信息
      oOrderDetail: {}, // 订单信息
      selectedIndex: 1,
      wagesDay: 5, // 每月缴纳工资日期
      cMonth: new Date().getMonth(),
      memberPhone: '',
      currentMonth: moment().format('YYYY-MM'), // 当前月
      indexType: 0,
      aColType: ['residence', 'social', 'fund', 'wages'],
      aType: {
        social: 'social',
        fund: 'fund',
        wages: 'wages'
      },
      oRadio: {
        selected: '', // 被选中
        radioType: '', // 弹出radio类型
        isShowRadio: false, // 是否显示弹框集合
        radioCol: [] // 当前的radio集合
      },

      payType: [0, 0, 1], // 0 社保 1 公积金 2 工资 （0 缴纳/代发 1 不缴/不发）
      aResidenceType: [
        { iKey: 0, iName: '-请选择-' },
        { iKey: 1, iName: '本地城镇' },
        { iKey: 2, iName: '本地农村' },
        { iKey: 3, iName: '外地城镇' },
        { iKey: 4, iName: '外地农村' },
        { iKey: 5, iName: '外籍人员' }
      ],
      aSalaryType: [
        { iKey: 5, iName: '每月5日' },
        { iKey: 10, iName: '每月10日' },
        { iKey: 15, iName: '每月15日' }
      ],
      isPaySocial: true,
      isPayFund: true,
      isPayWages: false,
      aWages: ['代发', '不发'],
      aCollection: [
        { iKey: 'aaaa', iName: '选择1' },
        { iKey: 'bbbb', iName: '选择2' },
        { iKey: 'cccc', iName: '选择3' }
      ]
    }
  },
  created () {
    this.getAccountInfo()
    this.getOrderList()
    console.log('moment=====2019-12=======', moment('2019-03').diff(moment('2018-09'), 'month'))
  },
  mounted () {},
  filters: {
    // 1:本地城镇 2:本地农村 3:外地城镇 4:外地农村 5:外籍人员
    residenceTypeFilter (input) {
      let aType = [
        '-请选择-',
        '本地城镇',
        '本地农村',
        '外地城镇',
        '外地农村',
        '外籍人员'
      ]
      return aType[input] || ''
    }
  },
  mixins: [mixinParams],
  components: {
    switchBtn,
    radioList
  },

  computed: {
    // 总计金额
    tatalMoney () {
      // {{oOrderDetail.sbBaseMoney}}*{{sbMonthCount}}
      let {sbBaseMoney = 0, gjjBaseMoney = 0, gzBaseMoney = 0} = this.oOrderDetail
      let {sbMonthCount, gjjMonthCount} = this

      return ~~sbBaseMoney * sbMonthCount + ~~gjjMonthCount * gjjBaseMoney + ~~gzBaseMoney
    },
    // 将获取的数据按照A-Z字母开头排序
    sbTotalMoney () {
      let {sbBaseMoney = 0} = this.oOrderDetail
      return this.sbMonthCount * sbBaseMoney
    },
    gjjTotalMoney () {
      let {gjjBaseMoney = 0} = this.oOrderDetail
      return this.gjjMonthCount * gjjBaseMoney
    },
    sbMonthCount () {
      let {currentMonth} = this
      let {sbBeginMonth, sbEndMonth} = this.oOrderDetail
      sbBeginMonth = sbBeginMonth || currentMonth
      sbEndMonth = sbEndMonth || currentMonth
      return this.monthCount(sbBeginMonth, sbEndMonth)
    },
    // 计算公积金月份
    gjjMonthCount () {
      let {currentMonth} = this
      // let {gjjBeginMonth, gjjEndMonth} = this.oOrderDetail
      // gjjBeginMonth = gjjBeginMonth || currentMonth
      // gjjEndMonth = gjjEndMonth || currentMonth
      return this.monthCount(this.oOrderDetail.gjjBeginMonth || currentMonth, this.oOrderDetail.gjjEndMonth || currentMonth)
    },
    // 弹框集合起始时间
    aStartMonth () {
      let aDate = [2, 1, 0, -1, -2]
      let currentDay = new Date().getDay()
      if (currentDay <= 15) {
        aDate = [1, 0, -1, -2, -3]
      }
      let aPayType = ['预缴', '汇缴', '补缴', '补缴', '补缴']
      let aResult = []
      aDate.forEach((item, index) => {
        let idate = moment()
          .add(item, 'month')
          .format('YYYY-MM')

        let aCol = {
          iKey: idate,
          iName: `(${aPayType[index]})${idate}`
        }
        aResult.push(aCol)
      })
      return aResult
    },
    // 弹框集合结束时间
    aEndMonth () {
      let aDate = [2, 1]
      let currentDay = new Date().getDay()
      if (currentDay <= 15) {
        aDate = [1, 0]
      }
      let aPayType = ['预缴', '汇缴']
      let aResult = []
      aDate.forEach((item, index) => {
        let idate = moment()
          .add(item, 'month')
          .format('YYYY-MM')
        let aCol = {
          iKey: idate,
          iName: `(${aPayType[index]})${idate}`
        }
        aResult.push(aCol)
      })
      return aResult
    }
  },
  methods: {
    navToHello () {
      this.navTo('/hello')
    },
    // 计算月份
    monthCount (sbBeginMonth, sbEndMonth) {
      let result = moment(sbEndMonth).diff(moment(sbBeginMonth), 'month')
      // if (result <= 0) {
      //   result = 1
      // }
      return result + 1
    },
    // 获取基础信息
    async getAccountInfo () {
      let { userInfo } = this
      let oParams = {
        mobile: userInfo.mobile,
        cdkey: this.getCdkey()
      }
      let { values = {} } = await getAccountInfo(oParams)
      this.accountInfo = values
    },
    async getOrderList () {
      let oParams = {
        mobile: this.userInfo.mobile,
        cdkey: this.getCdkey()
      }
      let { values = {} } = await getOrderList(oParams)
      this.oOrderDetail = values[0] || {}
    },
    // 验证用户提交数据
    validatePostData () {
      let {isPaySocial, isPayFund, isPayWages, sbTotalMoney, gjjTotalMoney} = this
      let oOrderDetail = {}
      Object.assign(oOrderDetail, this.oOrderDetail)
      if (!isPaySocial && !isPayFund && !isPayWages) {
        this.$vux.toast.show({
          text: '请选择社保缴纳月份',
          type: 'cancel'
        })
        return false
      }
      if (!isPaySocial) {
        oOrderDetail.sbBaseMoney = 0
      }
      if (!isPayFund) {
        oOrderDetail.gjjBaseMoney = 0
      }
      if (!isPayWages) {
        oOrderDetail.gzBaseMoney = 0
      }
      if (isPaySocial && (!sbTotalMoney || sbTotalMoney <= 0)) {
        this.$vux.toast.show({
          text: '请填写社保基数',
          type: 'cancel'
        })
        return false
      }
      if (isPayFund && (!gjjTotalMoney || gjjTotalMoney <= 0)) {
        this.$vux.toast.show({
          text: '请填写公积金基数',
          type: 'cancel'
        })
        return false
      }
      if (isPayWages && (!oOrderDetail.gzBaseMoney || oOrderDetail.gzBaseMoney <= 0)) {
        this.$vux.toast.show({
          text: '请填写工资基数',
          type: 'cancel'
        })
        return false
      }
      this.oOrderDetail = oOrderDetail
      return true
    },
    // 提交社保订单
    async submitSbOrder () {
      let { userInfo, currentMonth, accountInfo, sbTotalMoney, gjjTotalMoney, tatalMoney } = this
      if (!this.validatePostData()) {
        return false
      }
      let oOrderDetail = this.oOrderDetail

      let Ip = this.getLocalStorage('userCity').cip || ''
      let oParams = {
        userName: userInfo.username,
        businessCity: accountInfo.businessCity,
        businessTown: accountInfo.businessTown,
        mobile: userInfo.mobile,
        cdkey: this.getCdkey(),
        newAccount: oOrderDetail.newAccount || 2,
        payWay: oOrderDetail.payWay || 1,
        residenceType: oOrderDetail.residenceType,
        sbBaseMoney: oOrderDetail.sbBaseMoney,
        sbBeginMonth: oOrderDetail.sbBeginMonth || currentMonth,
        sbEndMonth: oOrderDetail.sbEndMonth || currentMonth,
        sbTotalMoney: sbTotalMoney,
        gjjBaseMoney: oOrderDetail.gjjBaseMoney,
        gjjBeginMonth: oOrderDetail.gjjBeginMonth || currentMonth,
        gjjEndMonth: oOrderDetail.gjjEndMonth || currentMonth,
        gjjTotalMoney: gjjTotalMoney,
        gzBaseMoney: oOrderDetail.gzBaseMoney,
        gzBeginMonth: oOrderDetail.gzBeginMonth || currentMonth,
        gzEndMonth: oOrderDetail.gzEndMonth || currentMonth,
        gzTotalMoney: oOrderDetail.gzTotalMoney || 10000,
        discountMoney: oOrderDetail.discountMoney || 0,
        totalMoney: tatalMoney,
        vistorInfo: oOrderDetail.vistorInfo || '',
        Ip: Ip
      }
      let { result } = await submitSbOrder(oParams)
      if (result !== 1) {
        return false
      }
      setTimeout(() => {
        this.navTo('/order?orderType=0')
      }, 1000)
    },
    changeTab (index, type) {
      let aType = ['social', 'fund', 'wages']
      let iIndex = aType.indexOf(type)
      if (iIndex === 0) {
        this.isPaySocial = !index
      } else if (iIndex === 1) {
        this.isPayFund = !index
      } else if (iIndex === 2) {
        this.isPayWages = !index
      }
    },
    // 打开radio
    showRadios (iType, index) {
      this.indexType = index
      let aColType = ['residence', 'social', 'fund', 'wages']
      let aMonth = this.aStartMonth
      if (index === 1) {
        aMonth = this.aEndMonth
      }
      let aCols = {
        residence: this.aResidenceType,
        social: aMonth,
        fund: aMonth,
        wages: this.aSalaryType
      }
      let selected = 0
      if (iType === aColType[0]) {
        selected = this.oOrderDetail.residenceType
      } else if (iType === aColType[1]) {
        if (index === 0) {
          selected = this.oOrderDetail.sbBeginMonth || this.currentMonth
        } else if (index === 1) {
          selected = this.oOrderDetail.sbEndMonth || this.currentMonth
        }
      } else if (iType === aColType[2]) {
        if (index === 0) {
          selected = this.oOrderDetail.gjjBeginMonth || this.currentMonth
        } else if (index === 1) {
          selected = this.oOrderDetail.gjjEndMonth || this.currentMonth
        }
      } else if (iType === aColType[3]) {
        selected = this.wagesDay
      }
      this.oRadio = {
        selected: selected,
        radioType: iType,
        radioCol: aCols[iType],
        isShowRadio: true
      }
    },
    chooseResult (result, iType) {
      let aColType = ['residence', 'social', 'fund', 'wages']
      let indexType = this.indexType
      let oOrderDetail = {}
      Object.assign(oOrderDetail, this.oOrderDetail)
      if (iType === aColType[0]) {
        oOrderDetail.residenceType = result.iKey
      } else if (iType === aColType[1]) {
        if (indexType === 0) {
          oOrderDetail.sbBeginMonth = result.iKey
        } else if (indexType === 1) {
          oOrderDetail.sbEndMonth = result.iKey
        }
      } else if (iType === aColType[2]) {
        if (indexType === 0) {
          oOrderDetail.gjjBeginMonth = result.iKey
        } else if (indexType === 1) {
          oOrderDetail.gjjEndMonth = result.iKey
        }
      } else if (iType === aColType[3]) {
        this.wagesDay = result.iKey
      }
      this.oOrderDetail = oOrderDetail
      this.oRadio.isShowRadio = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/style/mixin";
.cm-input {
  text-align: right;
}
.i-date {
  // width: cmSize(350);
  padding: 0 cmSize(10);
}
.base-title {
  padding: cmSize(40);
}
.block-ct {
  margin-bottom: cmSize(40);
  background: #ffffff;
}
.edit-icon {
  width: cmSize(50);
  height: cmSize(50);
  vertical-align: middle;
  padding-right: cmSize(20);
}
.item-ct {
  height: cmSize(160);
  padding: 0 cmSize(60);
}
.name-ct {
  height: cmSize(160);
  flex: 1 1 3rem;
}
.s-item {
  padding: cmSize(40) cmSize(60);
  height: auto;
}
.last-item {
  padding: cmSize(10) 0;
}

.c-green {
  color: #69c16a;
}
.title {
  background-color: #69c16a;
  color: #ffffff;
  height: cmSize(120);
}
.line {
  border-bottom: 1px solid #eeeeee;
  width: 100%;
}
.btn-ct {
  padding: cmSize(60);
}
.swich-btn {
  width: cmSize(250);
  height: cmSize(80);
}
.flex {
  display: flex;
  align-items: flex-end;
}
.arr-down {
  width: cmSize(80);
  height: cmSize(80);
  vertical-align: middle;
}
.tip-txt {
  font-size: cmSize(39);
}
.spec-ct {
  color: #a5a5a5;
}
</style>
